<template>
  <div class="login flex-box l-c-c">
    <div class="login_plate flex-box l-c-c">
      <div class="login_item item_left flex-box c-c-s">
        <div class="login_title">欢迎使用，<span>西瓜鱼客服系统~</span></div>
        <el-form
          :model="loginForm"
          status-icon
          :rules="rules"
          ref="loginForm"
          label-width="100px"
          class="login_form flex-box c-c-c phone_form"
        >
          <el-form-item prop="account">
            <div class="form_item flex-box c-c-c">
              <el-input
                ref="accountInput"
                v-model.trim="loginForm.account"
                placeholder="请输入您的账号"
                @keyup.enter.native="EnterClick()"
                class="login_input"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="form_item flex-box c-c-c">
              <el-input
                ref="passwordInput"
                type="password"
                v-model.trim="loginForm.password"
                placeholder="请输入您的密码"
                @keyup.enter.native="EnterClick()"
                class="login_input"
                show-password
              ></el-input>
            </div>
          </el-form-item>

          <el-form-item>
            <div class="form_item flex-box c-c-c">
              <el-button
                type="primary"
                @click="SubmitForm('loginForm')"
                class="submit_form"
                >登录</el-button
              >
            </div>
          </el-form-item>
          <el-form-item>
            <div class="flex-box c-c-c other_box">
              <div>—— <span>其他方式登录</span> ——</div>
              <div class="other_btn flex-box l-c-c">
                <div class="svg_btn flex-box l-c-c">
                  <svg aria-hidden="true" class="svg-icon">
                    <use xlink:href="#svg-qiyeweixin"></use>
                  </svg>
                </div>
                <div class="svg_btn flex-box l-c-c">
                  <svg aria-hidden="true" class="svg-icon">
                    <use xlink:href="#svg-zhifubaozhifu1"></use>
                  </svg>
                </div>
                <div class="svg_btn flex-box l-c-c">
                  <svg aria-hidden="true" class="svg-icon">
                    <use xlink:href="#svg-weixin"></use>
                  </svg>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="login_item item_right flex-box c-c-c">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo flex-box l-c-c"
          mode="horizontal"
          @select="LoginChange"
        >
          <el-menu-item index="0">二维码登录</el-menu-item>
          <el-menu-item index="1">账号密码登录</el-menu-item>
        </el-menu>
        <el-carousel
          :autoplay="false"
          indicator-position="none"
          ref="carouselLogin"
        >
          <el-carousel-item name="0">
            <div class="or_code_box flex-box c-c-c">
              <div class="or_code"></div>
              <div class="or_code_text">请使用企业微信扫描二维码登录</div>
              <div class="or_code_text">“网站扫描登录”</div>
            </div>
          </el-carousel-item>
          <el-carousel-item name="1">
            <el-form
              :model="loginForm"
              status-icon
              ref="loginForm"
              :rules="rules"
              label-width="100px"
              class="login_form flex-box c-c-c"
            >
              <el-form-item prop="account">
                <div class="form_item flex-box c-c-c">
                  <div class="form_title">账号</div>
                  <el-input
                    ref="accountInput"
                    v-model.trim="loginForm.account"
                    placeholder="请输入您的账号"
                    class="login_input"
                    @keyup.enter.native="EnterClick()"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="password">
                <div class="form_item flex-box c-c-c">
                  <div class="form_title">密码</div>
                  <el-input
                    ref="passwordInput"
                    v-model.trim="loginForm.password"
                    type="password"
                    placeholder="请输入您的密码"
                    class="login_input"
                    show-password
                    @keyup.enter.native="EnterClick()"
                  />
                </div>
              </el-form-item>

              <el-form-item>
                <div class="form_item flex-box c-c-c">
                  <el-button
                    type="primary"
                    class="submit_form"
                    @click="SubmitForm('loginForm')"
                    >登录</el-button
                  >
                </div>
              </el-form-item>
            </el-form>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script type="javascript/text">
import { login } from "@/api/login";
// eslint-disable-next-line no-unused-vars
import CryptoJS from "../utils/cryptoData";
// eslint-disable-next-line no-unused-vars
import { getToken, setToken, removeToken } from "@/utils/auth";
export default {
  data() {
    var InspectionAccount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else if (this.loginError.account == 500) {
        callback(new Error("请输入正确的账号"));
        this.loginError.account = 200;
      } else {
        callback();
      }
    };
    var InspectionPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (this.loginError.password == 500) {
        callback(new Error("请输入正确的密码"));
        this.loginError.password = 200;
      } else {
        callback();
      }
    };
    return {
      /**登录数据错误保存 */
      loginError: {
        account: 200,
        password: 200,
      },
      /**切换登录 */
      activeIndex: "0",
      /**登陆参数 */
      loginForm: {
        account: "",
        password: "",
      },
      /**校验规则 */
      rules: {
        account: [{ validator: InspectionAccount, trigger: "blur" }],
        password: [{ validator: InspectionPassword, trigger: "blur" }],
      },
      c: 0,
    };
  },
  methods: {
    /** 登陆方式切换 */
    LoginChange(index) {
      this.$refs.carouselLogin.setActiveItem(index);
    },
    /** 提交登陆 */
    SubmitForm(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          let { data, statusCode } = await login(
            this.loginForm.account,
            this.loginForm.password
          );
          // if (!statusCode) return;
          // eslint-disable-next-line eqeqeq
          if (statusCode == 200) {
            setToken(data);
            this.$router.push("/");
          } else {
            this.loginError.account = statusCode;
            this.loginError.password = statusCode;
            this.$refs[name].validate();
          }
        } else {
          return false;
        }
      });
    },
    /** 回车 */
    EnterClick() {
      this.$refs.loginForm.validateField("account", async (errorMsg) => {
        if (!errorMsg) {
          await this.$refs.passwordInput.focus();
        } else {
          await this.$refs.accountInput.focus();
        }
      });
      this.$refs.loginForm.validateField("account", async (errorMsg) => {
        if (!errorMsg) {
          await this.SubmitForm("loginForm");
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped src="@/assets/styles/login.scss"></style>
